<template>
  <div>
    <Search @refresh='onRefresh' @search='onSearch' @deleteAll='deleteCompanyAll'>
      <el-button type="primary" :loading="false" @click="dialogVisible=true">添加公司</el-button>
    </Search>
    <el-table :data="tableData" ref="qtable" border v-loading="loading">

      <el-table-column prop="companyName" label="企业名称" align='center' />
      <el-table-column prop="score" label="企业评分" align='center' />
      <el-table-column label="创建时间" align='center'>
        <template #default="scope">
          {{time(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="状态" align='center'>
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" @change='onChangeStatus(scope.row)'>
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="" align='center'>
        <template #default="scope">
          <div class="button">
            <i class="el-icon-delete"></i>
            <el-button type="text" @click="onClickDeleteCompany(scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size='15' hide-on-single-page @current-change='onCurrentChange'>
      </el-pagination>
    </div>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <div class="box-company">
        <span>企业名称:</span>
        <div class="company">
          <el-input v-model="companyName" placeholder="请输入企业名称"></el-input>
        </div>
        <span>企业评分:(最大为5分)</span>
        <div class="company">
          <el-input-number v-model="score" :min="1" :max="5" size='large'></el-input-number>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" size='small'>取 消</el-button>
          <el-button type="primary" @click="onAddCompany" size='small'>确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang='ts'>
import { reactive, ref, toRefs } from "vue";
import { Get, Post } from "@/api";
import Search from "@/components/search/Search.vue";
import { $message, time } from "@/components/element";
export default {
  name: " ",
  components: { Search },
  setup() {
    const data = reactive({
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      score: 5,
      companyName: "",
    });

    let pageNo: number = 1;
    const onCurrentChange = async (val: number) => {
      pageNo = val;
      await getCompany(val);
    };

    const qtable = ref();
    const getCompany = async (pageNo = 1) => {
      try {
        data.loading = true;
        const userListResult = await Get({
          url: "getCompany",
          data: {
            pageNo,
            pageSize: 15,
          },
        });
        data.tableData = userListResult.data.data;
        data.total = userListResult.data.total;
        qtable.value.doLayout();
        data.loading = false;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };
    getCompany();

    /* 删除 */
    const onClickDeleteCompany = async (param: { _id: string }) => {
      try {
        const deleteResult = await Post({
          url: "deleteCompany",
          data: {
            id: param._id,
          },
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /*修改状态  */
    let timeout: any = null;
    const onChangeStatus = (param: { _id: string; status: boolean }) => {
      if (timeout) {
        clearTimeout(timeout);
      }
      timeout = setTimeout(async () => {
        try {
          const updateResult = await Post({
            url: "updateCompany",
            data: {
              id: param._id,
              status: param.status,
            },
          });
          if (updateResult.data.code == 200) {
            $message("success", updateResult.data.message);
          }
        } catch (error) {
          console.log(error);
          if (error.data) {
            $message("error", error.data.message);
          }
        }
      }, 1000);
    };

    // =======================================================================

    /* 刷新 */
    const onRefresh = async () => {
      await getCompany(pageNo);
    };

    /* 搜索 */
    const onSearch = async (valeu: string) => {
      try {
        data.loading = true;
        const userListResult = await Get({
          url: "searchCompany",
          data: {
            name: valeu,
          },
        });
        data.tableData = userListResult.data.data;
        data.total = userListResult.data.total;
        qtable.value.doLayout();
        data.loading = false;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 删除全部 */
    const deleteCompanyAll = async () => {
      try {
        const deleteResult = await Post({
          url: "deleteCompanyAll",
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 添加 */
    const onAddCompany = async () => {
      try {
        if (!data.companyName) return $message("error", "公司不能为空");
        const deleteResult = await Post({
          url: "addCompany",
          data: {
            companyName: data.companyName,
            score: data.score,
          },
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          data.dialogVisible = false;
          data.companyName = "";
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    return {
      ...toRefs(data),
      onClickDeleteCompany,
      onCurrentChange,
      onChangeStatus,
      deleteCompanyAll,
      onAddCompany,
      onRefresh,
      onSearch,
      qtable,
      time,
    };
  },
};
</script>
<style lang="less" scoped>
.button,
.el-button--text {
  color: red;
}
.button:hover,
.el-button--text:hover {
  color: red;
}
.pagination {
  margin-top: 20px;
  display: flex;
  position: relative;
  .el-pagination {
    position: absolute;
    right: 0;
  }
}
.box-company {
  width: 60%;
  margin: 0 auto;
  .company {
    margin: 15px 0;
  }
}
</style>